import React,{useState,useEffect} from 'react'
                     //todo 生命周期


//! 相当于render 只要状态一更新，函数执行一次
const Todolist = () => {
    // console.log(123);

    //! 一定要写到最顶层，按照一定的顺序赋值

    //! useState返回一个数组，数组的第一项是状态，第二项是更新状态的方法 
    // let arr=useState('1234');
    // console.log(arr);
    //todo 直接数组解构出来
    const [val,setVal]=useState('1234');

    //todo 多个状态，声明多个useState,不同的状态用不同的useState去生成 
    //todo 一个useState控制一个状态
    // const [stu,setStu]=useState({name:'张三',age:18});

    //!严格模式 必须加上声明变量的关键字
    // const upDataStu=()=>{
    //     //! 里面直接放新状态值 新的状态值直接替换（与setState不同，setState是直接合并）
    //     // setStu({name:val})
    //     //! 现在是将...stu与name:val合并后，替换原来的 
    //     setStu({...stu,name:val})
    // }

    const [list,setList]=useState([1,2,3]);

    //? 实现一个数字每隔一秒加一
    const [num,setNum]=useState(0);

    //! 与类组件不同的是，类组件中didiupdate只在更新时执行，挂载时候不执行
    //! 所有的useEffect在最初挂载时，就会执行一次，之后更新时看依赖项
    
    //!第一个参数是函数，第二个参数是数组，空数组代表只执行一次相当于DidMount只执行一次  挂载阶段
    useEffect(()=>{
        //! 只执行一次setInterval函数 
        console.log('didMount')
        let intervalid=setInterval(()=>{
            // setNum(num+1); 闭包，每次状态更新，都会执行一次todolist函数，然后num初始化为0，不会改变
            console.log('setInterval')
                //! 形参，通过setNum方法传过来实参，且实参是原状态 
            setNum((num)=>num+1);
        },1000)
        //! 返回的这个函数会在卸载时候执行
        //! 相当于componentWillunmount
        return()=>{
            clearInterval(intervalid);
        }
    },[])
    //! 第二个参数传入依赖项，相当于componentDidUpdate  更新阶段，哪个更新，传入对应依赖项
    useEffect(()=>{
        console.log(list);
        //todo 所以将本地存储代码放到这里即可
        localStorage.setItem('todolist',JSON.stringify([val,...list]));
    },[list])
    //! 不同依赖项，写不同useEffect
    // useEffect(()=>{
    //     //! 不传依赖项则有状态变化就执行 
    //     console.log("有状态变化了")
    // })


    const addItem=()=>{
        setList([val,...list]);//!异步，下面不能立刻拿到新的值

        //! localStorage.setItem('todolist',JSON.stringify(list));

        // localStorage.setItem('todolist',JSON.stringify([val,...list]));
    }

    return (
        <div>
            {/* 每隔一秒，自动加一 */}
            <h2>{num}</h2>
            {/* <div>name:{stu.name}--age:{stu.age}</div> */}

            {/* 写成受控组件                 传的新的状态的值 */}
            <input value={val} onChange={(e)=>{setVal(e.target.value)}} type='text'/> 
            {/* <button onClick={upDataStu}>更新学生信息</button> */}
            <button onClick={addItem}>添加</button>
            <ul>
                {
                    list.map((item,index)=><li key={index}>{item}</li>)
                }
            </ul>
        </div>
    )
}

export default Todolist;

const fn=()=>{
    let num=100;
    return ()=>{
        num++;
        console.log(num);
    }
}
const f1=fn();